import Vue from 'vue';
import {PageData} from "../../../server/types";

interface DataType {
  /** bind */
  //数据，或者一个筛选后的结果
  dataList: any[],
  //当前页
  currentPage: number,
  //每页多少条
  pageSize: number,
  //数据总数
  dataCount: number
  /** unbind */
}

interface MethodsType {
  //此方法模拟后端获取数据
  getData(): void

  deleteItem(): Promise<void>
}

interface ComputedType {
}

interface PropsType {
}

export default Vue.extend<DataType, MethodsType, ComputedType, PropsType>({
  name: "NormalPagination",
  created() {
    this.getData();
  },
  data() {
    return {
      //数据，或者一个筛选后的结果
      dataList: [],
      //当前页
      currentPage: 1,
      //每页多少条
      pageSize: 10,
      //数据总数
      dataCount: 0
    }
  },
  methods: {
    //此方法模拟后端获取数据
    getData(): void {
      //模拟数据
      const data: PageData<any> = {
        //当前页
        page: 1,
        //数据总数
        records: 100,
        //数据
        rows: Array.from({length: 10}).map((x, i) => (this.currentPage - 1) * 10 + i),
        //分页总数
        total: 0,
      };
      //下面这两行可以复制
      this.dataList = data.rows;
      this.dataCount = data.records;
    },
    async deleteItem(): Promise<void> {
      try {
        await this.$confirm('是否删除这条数据？');
      } catch {
        return;
      }
      //这行应为后端交互删除数据
      const data = await Promise.resolve();
      this.$message.success('删除成功');
      //这个是判断当前页不是第一页且当前页是最后一条数据，那么就需要往前翻页
      if (this.currentPage > 1 && (this.dataCount === this.pageSize * (this.currentPage - 1) + 1))
        this.currentPage--;
      this.getData();
    }
  }
})
